<html>

<head>
  <title>微信扫码登录</title>
  <link rel="stylesheet" href="./css/element-ui.css">
</head>

<body>
  <div 
    id="index"
    style="width: 100vw;height: 100vh;
      background:#eee; 
      display: flex; align-items:center">

    <div style="height: 70%; width:100%;display: flex; align-items:center; 
      backgroundSize: 100% 100%;
      justify-content: flex-end; " :style="{'backgroundImage':`url(${this.imgUrl})`}">
      <div v-loading="loading" element-loading-text="登录中..." style="
            width: 330px;
            height: 440px;
            overflow: hidden;
            margin-right:50px
          ">
        <iframe style="width: 100%; height: 100%; background: #eee;" src="./qrCode.html"></iframe>
      </div>
    </div>
  </div>

  <script src="./js/vue.js"></script>
  <script src="./js/element-ui.js"></script>
	<script src="./js/jquery.js"></script>
  <script>

    function getQueryString(key) {
      var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
      var result = window.location.search.substr(1).match(reg);
      return result ? decodeURIComponent(result[2]) : null;
    }
    const vm = new Vue({
      el: '#index',
      data() {
        return {
          imgUrl: './images/background.png',
          loading: false,
          code: ''
        }
      },
      mounted() {
        // 获得code时
        if (window.location.href.includes("code")) {
          let code = getQueryString("code");
          console.error("code:", code);
          this.code = code;
          this.loading = true;
          let that = this;
          // 如果前后台都想自己完成的话，可以用nodejs作为后台简单点，也可以用其他后台语言，例如java或php
          // 道理一样的，可以加我微信号咨询 yizheng369
          // this.$alert(`将code: ${code} 传给后台，后台获取到个人信息，即可完成登录！`, '提示', {
          //   callback: that.clickFun.bind(that)
          // })
          that.clickFun()
        }
      },
      methods: {
        getWx(theData){
          return new Promise((res,rej)=>{
            $.ajax({
              type: "POST",
              url: theData.url,
              data: theData,
              success:  (data) => {
                res(data)
              },
              error: (err) => {
                rej(err)
              }
            })
          })
        },
        async clickFun(data) {
          if(!this.code){
            console.log('缺少code');
            return
          }
          try {
            let data =await this.getWx({ url: 'wx.php', code: this.code })
            console.log('data', data);
            if(data && data.openid && data.nickname){
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              let timer = setTimeout(()=>{
                clearTimeout(timer);
                window.location.href = './home.php';
              }, 2000);
            }
          } catch (error) {
            console.error('error', error);
          }
          
          this.loading = false;
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          
        }
      }
    })
  </script>

</body>

</html>